<template>
	<view class="warningcontrol">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<!-- <view class="sel-wrap">
			<view :class="selVal==1?'active inventory':'inventory'" @click="change1">管控信息</view>
			<view :class="selVal==2?'active inventory':'inventory'" @click="change2">企业管控</view>
		</view> -->
		<!-- 管控信息 -->
		<template v-if="selVal==1">
			<view class="msg-control">
				<noData v-if="dataList.length==0" />
				<view class="item" v-for="item in dataList" :key="item.id" @click="jumpDetail(1,item.id)">
					<view class="title">
						<view class="content">{{item.title}}</view>
						<view class="circle" :style="item.readstatus==0?'':'background:green'"></view>
					</view>
					<view class="issue">发布者：{{item.publisher}}</view>
					<view class="detail">
						<view class="padding">
							<view class="time">{{item.publishdate}}</view>
							<view class="search">
								<text style="margin-right: 10rpx;">查看详情</text>
								<image
									src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/right-arrow.png"
									mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 企业管控 -->
		<template v-if="selVal==2">
			<view class="enterprise-control">
				<noData v-if="dataList.length==0" />
				<view class="item" v-for="item in dataList" :key="item.id" @click="jumpDetail(2,item.id)">
					<view class="warning-type" style="background: #FFCC00;"> 橙色预警</view>
					<view class="title">{{item.title}}</view>
					<view class="issue">发布者：{{item.publisher}}</view>
					<view class="detail">
						<view class="padding">
							<view class="time">管控时间：{{item.publishdate}}</view>
							<view class="search"><text>查看详情</text>
								<image
									src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/right-arrow.png"
									mode=""></image>
							</view>
						</view>
					</view>

				</view>




			</view>
		</template>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index.js'
	import {
		ref
	} from 'vue'
	let name = "预警管控"
	let selVal = ref('1')

	let single = ''
	let dataList = ref([])
	let change1 = () => {
		selVal.value = 1
		getList()
	}
	let change2 = () => {
		selVal.value = 2
		getList()
	}
	let jumpDetail = (num, id) => {

		uni.navigateTo({
			url: `/homePageOther/enterprisecontrol/enterprisecontrol?type=${num}&id=${id}`
		})
	}
	let range = [{
			value: 1,
			text: "篮球"
		},
		{
			value: 2,
			text: "足球"
		},
		{
			value: 3,
			text: "游泳"
		},
	]
	let getList = () => {
		http({
			url: '/notice/datalist',
			data: {
				columnid: selVal.value
			}
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list

			}

		})
	}
	getList()
</script>

<style lang="scss" scoped>
	.warningcontrol {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.sel-wrap {
			height: 100rpx;
			background-color: #fff;
			padding: 0 204rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.inventory,
			.record {
				position: relative;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;

			}

			.active {
				position: relative;

				font-weight: bold;
				font-size: 30rpx;
				color: #000000;


				&:before {
					position: absolute;
					content: '';
					width: 48rpx;
					height: 8rpx;
					background: #0874FA;
					border-radius: 4rpx;
					bottom: -6rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

		}

		.msg-control {
			height: calc(100vh - 160rpx);
			background-color: #F3F5F7;
			display: flex;
			padding-top: 24rpx;
			flex-direction: column;
			align-items: center;
			overflow: scroll;
			padding-bottom: 30rpx;

			.item:first-child {
				margin-top: 0 !important;
			}

			.item {
				background-color: #fff;
				padding-bottom: 31rpx;
				width: 678rpx;
				margin-top: 23rpx;
				background: #FFFFFF;
				border-radius: 14rpx;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 45rpx 29rpx 34rpx;

					.content {
						font-weight: 500;
						font-size: 31rpx;
						color: #000000;
					}

					.circle {
						width: 21rpx;
						height: 21rpx;
						background: #FF0000;
						border-radius: 50%;
					}

				}

				.issue {

					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					padding-left: 33rpx;
					margin-bottom: 37rpx;
				}

				.detail {
					padding: 0 32rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #C1C1C1;

					.padding {
						padding: 25rpx 37rpx 0 33rpx;
						width: 100%;
						display: flex;
						border-top: 2rpx solid #EDEBEB;
						justify-content: space-between;
						align-items: center;

						.time {}

						.search {
							text {}

							image {
								width: 12rpx;
								height: 20rpx;
							}
						}
					}
				}
			}
		}

		.enterprise-control {
			height: calc(100vh - 160rpx - 100rpx);
			background-color: #F3F5F7;
			overflow: scroll;
			padding: 24rpx 36rpx 93rpx 36rpx;

			.item:first-child {
				margin-top: 0 !important;
			}

			.item {
				background-color: #fff;
				padding-bottom: 35rpx;
				margin-top: 34rpx;

				.warning-type {

					height: 53rpx;
					background: #FF0000;
					border-radius: 14rpx 14rpx 0rpx 0rpx;
					text-align: center;
					line-height: 53rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;

				}

				.title {
					padding-left: 34rpx;
					font-weight: 500;
					font-size: 31rpx;
					color: #000000;
					margin-top: 37rpx;
					margin-bottom: 29rpx;

				}

				.issue {
					padding-left: 34rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					margin-bottom: 37rpx;

				}

				.detail {
					padding-left: 34rpx;

					padding-right: 37rpx;

					.padding {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-top: 2rpx solid #EDEBEB;
						padding-top: 22rpx;

						.time {

							font-weight: 400;
							font-size: 25rpx;
							color: #666666;

						}

						.search {
							display: flex;
							align-items: center;

							text {

								font-weight: 400;
								font-size: 25rpx;
								color: #C1C0C0;

							}

							image {
								width: 12rpx;
								height: 20rpx;
								margin-left: 17rpx;
							}
						}
					}
				}
			}
		}

	}
</style>